<template>
    <div class="delivery_confirm">
        <top-timer :back="confirmType==='01'?true:false"/>
        <div class="confirm_box" v-if="confirmType==='01'">
            <div class="box_title center" @click="$router.push('deliveryConfirm')">
                <div class="font_40 col_333">箱门已关闭，请确认本次投递的衣物</div>
                <div class="font_28 col_666">如投递有误，可重新开箱</div>
            </div>
            <div class="overflow font_30 col_999" style="margin:0.40rem 0.80rem 0.20rem 0.80rem;">
                <div class="fl">订单：{{deliveryInfo.orderCode}}</div>
                <div class="fr">配送流水：{{deliveryInfo.sendCode}}</div>
            </div>
            <div class="delivery_list">
                <el-row class="list_head font_30">
                    <el-col :span="6">衣物编号</el-col>
                    <el-col :span="6">衣物</el-col>
                    <el-col :span="6">颜色</el-col>
                    <el-col :span="6">状态</el-col>
                </el-row>
                <el-row class="list_body font_28 col_blue col_666" v-for="info in deliveryInfo.clothesDetailVOList"
                        v-if="info.isSend">
                    <el-col :span="6">{{info.clothesCode}}</el-col>
                    <el-col :span="6">{{info.categoryName}}</el-col>
                    <el-col :span="6">{{info.colorCodeName || '--'}}</el-col>
                    <el-col :span="6">已扫码</el-col>
                </el-row>
            </div>
            <div class="btn center">
                <div class="again_open font_40" @click="againOpen">重新开箱</div>
                <div class="confirm_btn font_40" @click="deliveryConfirm">投递完成</div>
            </div>
        </div>
        <div class="confirm_box" v-if="confirmType==='02'">
            <div class="box_title center">
                <img src="@/assets/img/success-icon.png" alt="" style="width:50px;height:50px;">
                <div class="font_40 col_333">投递完成</div>
            </div>
            <div class="order_msg center font_30 col_666">
                <div>订单号：{{deliveryInfo.orderCode}}</div>
                <div>配送流水：{{deliveryInfo.sendCode}}</div>
                <div class="font_28">配送件数：{{delivery.sendNums}}</div>
                <div class="font_28">投递件数：{{delivery.deliveryNums}}</div>
            </div>
            <div class="btn center">
                <div class="again_open font_40" @click="home">返回首页</div>
                <div class="confirm_btn font_40" @click="continueDelivery">继续投递</div>
            </div>
        </div>
        <top-tips/>
    </div>
</template>

<script>
  export default {
    name: 'delivery-confirm',
    data() {
      return {
        confirmType: '01',
        delivery: {},
        deliveryInfo: {},
      };
    },
    created() {
      let deliveryId = this.$route.query.deliveryId;
      let boxCode = this.$route.query.boxCode;
      this.$axios.get('deliveryRest/getThisDeliveryInfoList', {
        params: {
          deliveryId: deliveryId,
        },
      }).then(res => {
        this.deliveryInfo = res.data;
      });
    },
    methods: {
      home() {
        this.$router.push({path: 'home', query: {isAdmin: true}});
      },
      //重新开箱
      againOpen() {
        let boxCode = this.$route.query.boxCode;
        let boxDetailId = this.$route.query.boxDetailId;
        let deliveryId = this.$route.query.deliveryId;
        this.$axios.post('deliveryRest/reOpenBox', {
          deliveryId: deliveryId,
        }).then(res => {
          if (res.data.result) {
            let success = () => {
              this.$router.push({
                path: 'deliveryOpenCupboard',
                query: {boxCode: boxCode, boxDetailId: boxDetailId},
              });
            };
            let error = () => {
              this.$alert('开箱失败，请联系客服，联系方式见屏幕下方！');
            };
            let boxMac = this.$boxConfig[boxCode];
            window.cordova.plugins.CabinetPlugin.sendOpenBoxCommand(boxMac, success, error);
          } else {
            this.$alert(res.data.msg);
          }
        });
      },
      // 投递完成
      deliveryConfirm() {
        this.confirmType = '02';
        let deliveryId = this.$route.query.deliveryId;
        this.$axios.post('deliveryRest/completeDelivery', {
          deliveryId: deliveryId,
        }).then(res => {
          if (res.data.result) {
            this.delivery = res.data.obj;
          } else {
            this.$alert(res.data.msg);
          }
        });
      },
      // 继续投递
      continueDelivery() {
        this.$router.push({
          path: 'deliveryCupboard',
        });
      },
    },
  };
</script>

<style lang="scss">
    .delivery_confirm {
        position: relative;

        .confirm_box {
            .box_title {
                div {
                    margin: 0.20rem 0;
                }
            }

            .delivery_list {
                margin: 0 0.80rem 0.60rem .80rem;
                text-align: center;
                height: 5.00rem;
                overflow-y: scroll;

                .list_head {
                    background: rgba(236, 245, 252, 1);
                    padding: 0.19rem 0;
                    color: #999;
                }

                .list_body {
                    padding: 0.19rem 0;
                    border-bottom: 0.02rem solid rgba(202, 229, 253, 1);
                }
            }

            .order_msg {
                width: 90%;
                height: 2.50rem;
                background: rgba(249, 252, 255, 1);
                box-shadow: 0.02rem 0.02rem 0.20rem 0rem rgba(0, 0, 0, 0.1);
                border-radius: 0.24rem;
                margin: 0.40rem auto;
                padding: 0.10rem 0;

                div {
                    margin: 0.10rem 0;
                }
            }

            .btn {
                div {
                    width: 2.40rem;
                    height: 0.80rem;
                    display: inline-block;
                    line-height: 0.75rem;
                    box-shadow: 0rem 0.02rem 0.04rem 0rem rgba(10, 130, 236, 0.2);
                    border-radius: 0.51rem;
                    border: 0.02rem solid rgba(0, 128, 244, 1);
                    margin: 0 0.30rem;
                }

                .again_open {
                    background-color: #fff;
                    color: #0A82EC;
                }

                .confirm_btn {
                    color: #fff;
                    background-color: #0A82EC;
                }
            }
        }
    }
</style>
